<template>
  <div class="calculatorContent" style="color: #fff;">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="calc">
      <div class="display">
        {{ equation }}
      </div>

      <div class="keypad">
        <div class="key num" v-for="key in [1, 2, 3]" @click="useNumber(key)">{{ key }}</div>
        <div class="key fn" @click="plus()">+</div>

        <div class="key num" v-for="key in [4, 5, 6]" @click="useNumber(key)">{{ key }}</div>
        <div class="key fn" @click="minus()">-</div>

        <div class="key num" v-for="key in [7, 8, 9]" @click="useNumber(key)">{{ key }}</div>
        <div class="key fn" @click="multiply()">x</div>

        <div class="key special" @click="clear()">AC</div>
        <div class="key num" @click="useNumber(0)">0</div>
        <div class="key fn" @click="divide()">/</div>
        <div class="key fn" @click="result()">=</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'


const route = useRoute()
const router = useRouter()


const equation = ref('0');
const resultCalled = ref(false);
const lastResult = ref(0);

const useNumber = (num: any) => {
  num = num.toString()
  equation.value = equation.value.toString()
  equation.value = resultCalled.value ? num : equation.value.search(/^0/g) ? equation.value + num : (equation.value.search(/^[-]$/g) !== -1 ? equation.value + num : num)
  resultCalled.value = false;
};
const plusOperator = ' + ';
const plus = () => {
  // equation.value = checkOperator(equation.value, plusOperator) + plusOperator;
  equation.value = checkOperator(equation.value, plusOperator)
}
const minusOperator = ' - ';
const minus = () => {
  // equation.value = checkOperator(equation.value, minusOperator) + minusOperator;
  equation.value = checkOperator(equation.value, minusOperator)
}
const multiplyOperator = ' x ';
const multiply = () => {
  // equation.value = checkOperator(equation.value, multiplyOperator) + multiplyOperator;
  equation.value = checkOperator(equation.value, multiplyOperator)
}
const divideOperator = ' / ';
const divide = () => {
  // equation.value = checkOperator(equation.value, divideOperator) + divideOperator;
  equation.value = checkOperator(equation.value, divideOperator)
}
const clear = () => equation.value = '0'
const checkOperator = (equation: any, requestedOperator: any) => {
  equation = equation.toString()
  if (equation.search(/^0$/g) !== -1) {
    if (requestedOperator.search(/( [/x] )$/g) !== -1) return '0';
    else return requestedOperator.replace(/ /g, '')
  } else {
    if (resultCalled.value) {
      resultCalled.value = false;
      return lastResult.value + requestedOperator;
    } else {
      return equation.replace(/( [+\-/x] )$/g, '') + requestedOperator;
    }
  }
}
const result = () => {
  let eqResult = Function('"use strict";return (' + equation.value.replace(/( \x+ )/g, ' * ') + ')')();
  equation.value = eqResult;
}

onMounted(() => {

})

</script>

<style lang="scss" scoped>
.calculatorContent {
  width: 100%;
  .el-card {
      border-radius: $base-card-border-radius;
    }

  .calc {
    width: 320px;
    height: 480px;
    display: flex;
    flex-direction: column;
    margin: 40px auto 0;
    background-color: #D9D3C7;
    border: 2px solid #D9D3C7;
    box-shadow: 0px 3px 20px 0px red;
    :hover {
      box-shadow: 0px 3px 20px 0px rgba(248,216,82, 0.9);
      color: #000000;
    }
  }

  .display {
    flex: 1;
    background-color: #A5B3A6;
    margin: 10px;
    font-size: 40px;
    text-align: right;
    overflow-wrap: break-word;
    padding: 5px;
  }

  .keypad {
    height: 320px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 10px;
  }

  .key {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    cursor: pointer;
  }

  .num {
    background-color: #525759;
    color: #ffffff;
  }

  .fn {
    background-color: #877569;
    color: #000000;
  }

  .special {
    background-color: #BD5A04;
    color: #000000;
    font-size: 35px;
    font-weight: bold;
  }

  ::selection {
    background: none;
  }

}
</style>